<template>
  <div class="extractResult">
    <el-card shadow="never" class="inputCard">
      <div class="input">
        项目名：
        <el-input class="select-message" v-model="projectName" placeholder="请输入项目名关键字" size="small" clearable/>
        项目状态：
        <el-select class="select-message" v-model="status" placeholder="请选泽项目状态" size="small" clearable @change="handleQuery">
          <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label">{{item.label}}</el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
      </div>
    </el-card>
    <el-card class="resultCard" shadow="never" v-loading="loading">

      <div class="resultTable">
        <el-table border :header-cell-style="rowStyle"  :cell-style="rowStyle" :data="resultData">
          <el-table-column label="项目名" prop="projectName" show-overflow-tooltip></el-table-column>
          <el-table-column label="项目状态" prop="projectStatus" show-overflow-tooltip>
              <template v-slot="scope">
                <el-tag :type="statusTagType(scope.row.projectStatus)" >{{statusShowOptions[scope.row.projectStatus]}}</el-tag>
              </template>
          </el-table-column>
          <el-table-column label="项目地址" prop="projectLocation" show-overflow-tooltip></el-table-column>
          <el-table-column label="联系人" prop="projectContact" show-overflow-tooltip></el-table-column>
          <el-table-column label="项目评审时间" prop="projectReviewTime" show-overflow-tooltip></el-table-column>
          <el-table-column label="抽取人数" prop="projectReviewNumber" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="text" size="mini" @click="handleShow(scope.row.id)">查看</el-button>
              <el-button type="text" v-show="scope.row.projectStatus===2" size="mini" @click="supplementaryDrawing(scope.row.id)">补抽</el-button>
              <el-button type="text" style="color: red" v-show="scope.row.projectStatus===2" size="mini" @click="reExtract(scope.row.id)">重抽</el-button>
              <el-button type="text" style="color:red" v-show="scope.row.projectStatus===2" size="mini" @click="cancelExtract(scope.row.id)">取消抽取</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页组件-->
        <el-pagination :page-sizes="[5, 10, 20,50,100]" :page-size="this.pageSize" :current-page="this.page"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="this.counts" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
    <ExtractResult/>
    <ReviewExtractResult/>
    <Supplementary/>
  </div>
</template>


<script>
import { GetProjectExtractPageApi, GetProjectPageApi } from '@/request/project/project-api'
import ExtractResult from '@/components/review/ExtractResult.vue'
import store from '@/store'
import ReviewExtractResult from '@/components/review/ReviewExtractResult.vue'
import { cancelExtractResult, CheckIsSupplementary, reExtract } from '@/request/ProjectResult/projectResult-api'
import Supplementary from '@/components/review/Supplementary.vue'

export default {
  components:{
    ExtractResult,ReviewExtractResult,Supplementary
  },
  created () {
    this.init()
  },
  data () {
    return {
      statusOptions:[
        {value:'2',label:'已抽取'},
        {value:'3',label:'待评审'},
        {value:'4',label:'已评审'},
      ],
      statusShowOptions:['已登记','已设置条件,未抽取','已抽取','待评审','已评审','抽取失败','已取消'],
      statusTagTypes:['','','warning','warning','success','danger','info'],
      status:null,
      projectName:null,
      resultData:[],
      counts: 0,     //总数
      page: 1,      //当前页
      pageSize: 10, //每页个数
      loading: false,
    }
  },
  methods: {
    async init () {
      //初始化页面数据
      this.loading = true
      //初始化参数
      const param = {
        page: this.page,
        pageSize: this.pageSize,
        projectName: this.projectName ? this.projectName : undefined,
        projectStatus: this.status ? parseInt(this.status) : undefined,
        beginTime:  undefined,
        endTime:  undefined
      }
      let res = await GetProjectExtractPageApi(param)
      if (res && res.code === 200) {
        this.resultData = res.data.records
        this.counts = res.data.total
      } else {
        this.$message.error(res.msg ? res.msg : "初始化数据失败")
      }
      this.loading = false
    },
    rowStyle () {
      return 'text-align:center'
    },
    handleShow(id){
      store.commit("ReviewResult/changeShowExtractResultPageSync",true)
      store.commit("ReviewResult/changeShowExtractResultProjectId",id)
    },
    // pageSize切换
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    // 当前页面切换
    handleCurrentChange (val) {
      this.page = val
      this.init()
    },
    //返回状态的标签样式
    statusTagType(status){
      return  this.statusTagTypes[status]
    },
    reExtract(id){
      this.$confirm('即将重新抽取专家，是否继续？', '确认重新抽取', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        let res = await reExtract(id)
        if (res&&res.code===200){
          store.commit("ReviewResult/changeShowExtractResultSync",true)
          store.commit("ReviewResult/changeShowResultProjectId",id)
          this.$message.success("重新抽取专家成功")
        }else {
          this.$message.error(res.msg?res.msg:"重新抽取专家失败")
        }
      }).catch(e=>{

      })
    },
    cancelExtract(id){
      this.$confirm('即将取消抽取结果，是否继续？', '确认取消抽取结果', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        let res = await cancelExtractResult(id)
        if (res && res.code === 200) {
          this.$message.success("取消抽取结果失败")
        } else {
          this.$message.error(res.msg ? res.msg : "取消抽取结果失败")
        }
      }).catch(()=>{

      })
    },
    supplementaryDrawing(id){
      this.$confirm('即将补抽专家信息，是否继续？', '确认补抽', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'warning'
      }).then(async () => {
        let res = await CheckIsSupplementary(id)
        if (res&&res.code===200){
          store.commit('ReviewResult/changeSupplementaryProjectId',id)
          store.commit('ReviewResult/changeSupplementaryProjectSync',true)
        }else {
          this.$message.error(res.msg?res.msg:"补抽专家失败")
        }
      })
    },
    // 查询
    handleQuery () {
      this.page = 1
      this.init()
    },
  }
}
</script>
<style scoped lang="less">
.extractResult {
  .inputCard{
    margin-bottom: 10px;
    .input {
      font-size: 14px;

      .select-message {
        width: 200px;
        margin-right: 20px;
      }
    }
  }
  .resultCard {
    margin: 20px 0;
    .resultTable {
      margin: 40px 0;
    }
    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }

}
</style>
